<template>
	<view class="center">
		<!-- <view class="header">
				<view class="arrow" @tap="$back()">
					<image class="lefts" style="width: 20rpx;height: 40rpx;" src="../../../static/images/arrow_left.png" mode="aspectFit"></image>
				</view>
				<view class="tit f36 cfff"></view>
				<view class="btn f32 cfff btn-plain-primary btn-radius" @tap="$open('../screen/screen')">
					<image class="rights" src="../../../static/images/732.png" mode="aspectFit"></image>
				</view>
			</view> -->
		<hea-ders title="客户分布">
			<image class="left" slot='left' src="@/static/images/arrow_left.png" mode="widthFix" @click="back"></image>
			<image class="rights" slot='Rright' src="../../../static/images/732.png" mode="aspectFit" @tap="$open('../screen/screen')"></image>
		</hea-ders>
		<!-- 搜索框 -->
		<view class="seach">
			<view class="seach_one">
				<image src="../../../static/shopImage/tb_search.png" mode="aspectFit"></image>
				<input type="text" value="" placeholder="编码/名称" />
			</view>
			<view class="btn-plain-primary btn-radius">
				<image @click="showBottomV" src="../../../static/images/733.png" mode="aspectFit"></image>
			</view>
		</view>

		<!-- 弹框 -->
		<!-- 弹框里面的内容 -->
		<s-popup custom-class="center-popup" position="center" v-model="showBottomVisible">
			<view class="client_one">
				<view class="client_item" style="">
					<text>显示名称</text>
					<view class="uni-padding-wrap uni-common-mt">
						<view class="uni-list-cell-db">
							<switch class="client_wrap" @change="switch2Change" />
						</view>
					</view>
				</view>
				<view class="client_item">
					<text>显示颜色</text>
					<view class="client-select">
						<xfl-select :list="list" :clearable="false" :showItemNum="5" :listShow="false" :isCanInput="false"
						 :style_Container="'height: 100%; font-size:20rpx;color:#424242;padding-left: -20rpx; '" :placeholder="'placeholder'"
						 :initValue="'默认颜色'">
						</xfl-select>
					</view>
				</view>
				<view class="client_item">
					<text>显示星级</text>
					<view class="uni-padding-wrap uni-common-mt">
						<view class="uni-list-cell-db">
							<switch class="client_wrap" @change="switch2Change" />
						</view>
					</view>
				</view>
				<view class="client_item">
					<text>开单配置</text>
					<view class="client-select">
						<xfl-select :list="list" :clearable="false" :showItemNum="3" :listShow="false" :isCanInput="false"
						 :style_Container="'height: 100%; font-size:20rpx;color:#424242;padding-left: -20rpx;z-index: 99999 !important; '"
						 :placeholder="'placeholder'" :initValue="'销售订单'">
						</xfl-select>
					</view>
				</view>

			</view>
			<view class="bir">
				<view class="bir_item" style="border-right: 1px solid #eee;" @click="cancel">
					<text>取消</text>
				</view>
				<view class="bir_item">
					<text style="color: rgba(35, 153, 246, 1);">确定</text>
				</view>
			</view>
		</s-popup>
		<!-- 地图 -->
		<view class="page-body" v-if="!showBottomVisible">
			<view class="page-section page-section-gap" >
				<map  :latitude="latitude" :longitude="longitude" :markers="covers">
				</map>
			</view>
		</view>
		<image v-if="showBottomVisible" class="ditu" src="../../../static/images/ditu.png" mode=""></image>
	</view>
</template>

<script>
	import sPopup from '@/components/s-popup/index.vue';
	import xflSelect from '@/components/xfl-select/xfl-select.vue';
	import heaDers from '@/pages/header/header.vue'
	export default {
		components: {
			sPopup,
			heaDers
		},
		data() {
			return {
				showBottomVisible: false,
				id: 0, // 使用 marker点击事件 需要填写id
				title: 'map',
				latitude: 39.909,
				longitude: 116.39742,
				covers: [{
					latitude: 39.909,
					longitude: 116.39742,
					iconPath: '../../../static/location.png'
				}, {
					latitude: 39.90,
					longitude: 116.39,
					iconPath: '../../../static/location.png'
				}],
				// listBoxStyle: `height: 40px; font-size: 16px;`,
				list: [
					'苹果',
					{
						value: '香蕉',
					},
				],
				flag: false,
			}

		},
		methods: {
			cancel() {
				this.flag = !this.flag;
				// 事件错误
			},
			showBottomV() {
				this.showBottomVisible = !this.showBottomVisible
				this.showBottomVisible = this.showBottomVisible
			},
			switch1Change: function(e) {
				console.log('switch1 发生 change 事件，携带值为', e.target.value)
			},
			switch2Change: function(e) {
				console.log('switch2 发生 change 事件，携带值为', e.target.value)
			},
			visibleChange(isShow) { // 列表框的显示隐藏事件
				console.log('isShow::', isShow);
			},
			change({
				newVal,
				oldVal,
				index,
				orignItem
			}) {
				console.log(newVal, oldVal, index, orignItem);
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	}
</script>

<style lang="scss">
	.center{
		width: 100vw;
		height: 100vh;


		// .header {
		// 	flex-direction: row;
		// 	height: 88rpx;
		// 	display: flex;
		// 	align-items: center;
		// 	justify-content: space-between;
		// 	background-color: #249AF6;
		// 	padding: 0 20rpx 0 20rpx;
		// 	margin-top:50rpx;
		// 	.rights {
		// 		width: 40rpx;
		// 		height: 40rpx;
		// 	}
		// }
		.title {
			width: 100%;
			height: 88rpx;
			padding: 0 30rpx;
			box-sizing: border-box;
			background-color: rgba(36, 153, 246, 1);
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 22rpx;
			}

			text {
				font-size: 36rpx;
				color: #fff;
				font-weight: 400;
				font-family: PingFang SC;
			}

			.ima {
				image {
					width: 40rpx;
					margin-left: 5rpx;
				}
			}
		}

		.seach {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx;
			background: #fff;
		}

		.seach_one {
			display: flex;
			align-items: center;
			background: #F5F5F5;
			border-radius: 32rpx;
			width: 90%;
			padding: 10rpx;
		}

		.seach image {
			width: 32rpx;
			height: 32rpx;
			padding: 0 10rpx 10rpx 0;
			margin-left: 10rpx;
		}

		.uni-switch .uni-switch-input:after,
		uni-switch .uni-switch-input:before {
			background: #E0E0E0;
		}

		.client_one {
			width: 480rpx;
			height: 334rpx;
			// background: red;
			border-radius: 32rpx 32rpx 0 0;

			.client_item {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding-top: 20rpx;

				text {
					font-size: 24rpx;
					color: #616161;
					padding-left: 40rpx;
				}

				.client-select {
					width: 152rpx;
				}

				.show-box {
					margin-left: -14px;
				}
			}

			.client_wrap {
				transform: scale(0.6);

			}
		}

		.bir {
			display: flex;
			align-items: center;
			justify-content: space-around;

			// border-radius: 0px  0px   32px  0px;
			.bir_item {
				width: 240rpx;
				height: 56rpx;
				line-height: 56rpx;
				text-align: center;
				font-size: 24rpx;
				border-top: 1px solid #EEEEEE;
			}
		}
		.page-body{
			height: 100vh;
			.page-section{
				height: 100%;
			}
			map{
				width: 100%;
				height: 100%;
			}
		}
		.ditu {
			width: 100%;
			height: 100vh;
			opacity: 0.5;
		}
	}
</style>
